<template>
	<view class="xl-container-wrap full box relative" :style="{'--status-height':statusBarHeight_}">
		<view class="fixed-header-wrap">
			<view class="mask-image absolute inset">
				<image mode="aspectFill" class="full" :src="sourceUrl + '/mask-bg.png'"></image>
			</view>
			<view class="location-wrapper">
				<view class="location-wrap">
					<image :src="sourceUrl + '/xl-location.png'" class="location-icon"></image>
					<text class="location-value" @click="openMap">{{ cityName }}</text>
					<image :src="sourceUrl+'/xl-arrow-down.png'" class="arrow active"></image>
					<picker :range="areaList" range-key="label" @change="areaChangeHandle">
						<text class="area-value">{{ activeArea.label }}</text>
					</picker>
					<image :src="sourceUrl+'/xl-arrow-down.png'" class="arrow"></image>
				</view>
				<view class="search-wrap" @click="handleToSearch">
					<image :src="sourceUrl + '/search.png'" class="search-icon"></image>
					<text class="search-text">搜索</text>
				</view>
			</view>
		</view>
		<view class="xl-content-wrap flex column">
			<view class="relative flex-1 box w-100 ">
				<view class="absolute inset" id="xlContainer">
					<mescroll-uni :up="{page:{size:pageSize}}" :fixed="false" @init="mescrollInit" @down="downCallback"
						@up="upCallback" :noMoreSize="1">
						<view class="xl-list-header">
							<text>推荐乡邻</text>
						</view>
						<view class="xl-list mt-24">
							<view class="xl-item" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
								<view class="xl-image">
									<image :src="item.image" class="full" mode="aspectFill"></image>
								</view>
								<view class="xl-footer">
									<text>{{ item.nickname }}</text>
								</view>
							</view>
						</view>
					</mescroll-uni>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { LOAD_MORE } from '@/constant/index.js'
	import { mapGetters } from 'vuex'
	import { getAreaList } from '@/commonFunc/common.js'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				pageSize: 15,
				isEmpty: false,
				status: LOAD_MORE.LOAD_MORE,
				height: 500,
				cityName: '',
				city_id: '',
				eventName: 'changeXlCitySuccess',
				areaList: [],
				areaIndex: 0,
			}
		},
		onReady() {
			this.getHeight()
		},
		onLoad() {
			uni.$on(this.eventName, this.changeSuccess)
		},
		onUnload() {
			uni.$off(this.eventName, this.changeSuccess)
		},
		methods: {
			handleToSearch() {
				uni.navigateTo({
					url: `/pages-bundle/search/search?event=${this.eventName}`
				})
			},
			async areaChangeHandle(ev) {
				const { value } = ev.detail
				this.areaIndex = value * 1
				await this.$delay(1)
				this.mescroll.triggerDownScroll()
			},
			async initArea(city_id) {
				this.areaList = await getAreaList(city_id)
			},
			async changeSuccess(cityData) {
				const { id, name } = cityData
				this.cityName = name
				this.city_id = id
				this.$store.commit('location/addRecentlyData', { id, name })
				this.areaIndex = 0
				await this.$delay(1)
				this.mescroll.triggerDownScroll()
				this.initArea(id)
			},
			openMap() {
				const { cityName, eventName } = this
				uni.navigateTo({
					url: `/pages-bundle/city-list/city-list?current=${cityName}&event=${eventName}`
				})
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages-bundle/guide-detail/guide-detail?id=' + id
				})
			},
			upCallback(page) {
				const { num, size } = page
				this.initData({ page: num, size })
			},
			getHeight() {
				let selector = uni.createSelectorQuery().in(this)
				selector.select('#xlContainer').boundingClientRect().exec(rect => {
					const [target] = rect
					this.height = target.height
				})
			},
			async initData({ page, size }) {
				if (page === 1) {
					this.list = []
				}
				const { city_id, activeArea } = this
				const resp = await this.$request({
					url: '/TourGuide/getTourGuide',
					data: { page, list_rows: size, city_id, area: activeArea.value }
				})
				await this.$delay(300)
				const { code, data, msg } = resp
				if (code !== 1) {
					this.status = LOAD_MORE.LOAD_MORE
					return this.$toast({ title: msg })
				}
				const { current_page, per_page, total, data: list } = data
				if (!!list && list.length) {
					this.list.push(...list.map(item => {
						const { tour_guide: { name, image, id: userId } } = item
						item.nickname = name
						item.image = image
						item.id = userId
						delete item.tour_guide
						return item
					}))
				}
				const hasMore = current_page * per_page < total
				this.mescroll.endSuccess(list.length, total)
			},
		},
		computed: {
			...mapGetters(['city', 'location', 'cityId']),
			activeArea() {
				const target = this.areaList[this.areaIndex]
				return target || { label: '市本级', value: 0 }
			},
		},
		created() {
			this.city_id = this.cityId
			this.cityName = this.city
			this.initArea(this.cityId)
		},

	}
</script>

<style lang="scss" scoped>
	.xl-container-wrap {
		--nav-height: 88rpx;
		--fixed-search-top: calc(var(--nav-height) + var(--status-height));
		--fixed-search-height: 92rpx;
		--content-mt: 16rpx;

		.xl-content-wrap {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: calc(var(--fixed-search-top) + var(--fixed-search-height) + var(--content-mt));
			padding: 0 32rpx;
			box-sizing: border-box;

			.xl-list {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 44rpx;

				.xl-item {
					border-radius: 16rpx;
					overflow: hidden;
					position: relative;
					height: 400rpx;
					width: 100%;

					.xl-footer {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						height: 72rpx;
						background: rgba(0, 0, 0, 0.7);
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #FFFFFF;
					}

					.xl-image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.xl-list-header {
				height: 44rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.9);
				line-height: 44rpx;
			}
		}

		.fixed-header-wrap {
			width: 100%;
			height: 618rpx;
			box-sizing: border-box;
			position: relative;

			.location-wrapper {
				position: absolute;
				left: 0;
				right: 0;
				top: var(--fixed-search-top);
				display: flex;
				align-items: center;
				padding: 0 32rpx;
				height: var(--fixed-search-height);
				box-sizing: border-box;

				.search-wrap {
					margin-left: 24rpx;
					flex: 1;
					display: flex;
					align-items: center;
					padding: 12rpx 32rpx;
					box-sizing: border-box;
					position: relative;
					background: rgba(255, 255, 255, 0.4);
					border-radius: 8rpx 8rpx 8rpx 8rpx;

					.search-icon {
						width: 32rpx;
						height: 32rpx;
					}

					.search-text {
						height: 40rpx;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.6);
						line-height: 40rpx;
						margin-left: 8rpx;
					}
				}

				.location-wrap {
					display: flex;
					align-items: center;

					.arrow {
						width: 12rpx;
						height: 9rpx;

						&.active {
							margin-left: 8rpx;
						}
					}

					.location-value,
					.area-value {
						height: 44rpx;
						font-size: 32rpx;
						color: rgba(0, 0, 0, 0.9);
						line-height: 44rpx;
						width: 100rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-left: 8rpx;
					}

					.area-value {
						margin: 0 8rpx 0 12rpx;
						font-size: 28rpx;
					}

					.location-icon {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
	}
</style>